<!-- MyCustomComponent.vue -->
<script setup lang="ts">
import { onMounted, ref } from 'vue';

import { Select, SelectOption } from 'ant-design-vue';

import {
  type MeasureUnitOptionModel,
  type MeasureUnitProps,
} from './measure-unit-api';
import { generateMeasureUnitOptions } from './measure-unit-api';

defineOptions({
  name: 'SelectMeasureUnit',
});

const props = withDefaults(defineProps<MeasureUnitProps>(), {});

const unitOptions = ref<MeasureUnitOptionModel[]>([]);

onMounted(async () => {
  unitOptions.value = await generateMeasureUnitOptions(props.unitTypes);
});
</script>
<template>
  <Select
    :allow-clear="true"
    :filter-option="false"
    :placeholder="$t('common.placeholder.select')"
    class="min-w-60"
  >
    <SelectOption v-for="opt in unitOptions" :key="opt.id" :value="opt.value">
      {{ opt.label }}
    </SelectOption>
  </Select>
</template>
